<template>
	<view>
		<view class="content">
			<!-- 当前播放 -->
			<view class="content-title">
				<h3>当前播放
					<text class="content-title-num">({{playList.list.length}})</text>
				</h3>
			</view>

			<!-- push上来的歌曲 -->
			<view class="list-info">
				<view class="list-info-item" v-for="(item,index) in playList.list" :key="index">
					<view class="list-info-item-left" @tap="playMusic(index)">
						<text class="list-info-item-left-title1">{{item.name}} -</text>
						<text class="list-info-item-left-title2"> {{ item.ar[0].name}}</text>
					</view>
					<view class="list-info-item-right">
						<u-icon name="close" size="20"></u-icon>
					</view>
				</view>


			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 点击播放
			playMusic(index) {
				// 当前播放歌曲下标值
				this.$store.dispatch("playIndex", index);
				// 播放歌曲
				this.$store.dispatch("play");
			},
		},
		computed: {
			// 当前播放歌单歌曲
			playList() {
				return this.$store.state.playMusicListData;
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20px 15px;

		&-title {
			&-num {
				font-size: 13px;
				color: #b7bcd2;
			}

			h3 {
				color: white;
			}
		}

	}

	.list-info {
		height: 52vh;
		line-height: 40px;
		margin-top: 30rpx;
		overflow-x: hidden;
		overflow-y: scroll;

		&-item {
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				flex: 9;
				width: 70%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				&-title1 {
					color: aliceblue;
					padding: 0 10rpx;
				}

				&-title2 {
					font-size: 12px;
					color: #b7bcd2;
				}
			}

			&-right {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
			}


		}

	}
</style>
